<template>
  <div class="dashboard">
    <div v-if="isHasData">
    <el-row>
      <el-col :span="24" class="btn-show-table">
        <el-button @click="showTable()">
          <i :class="ishowTable ? 'iconfont icon-pie':'iconfont icon-table'"></i>
          <span>{{ishowTable? '返回饼图':'显示表格'}}</span>
        </el-button>
      </el-col>
    </el-row>
    <el-row v-if="!ishowTable">
      <el-col :md="24" :lg="12">
        <industry-loans :industry-data="industryData" v-on:click-item="clickItem"></industry-loans>
      </el-col>
      <el-col :md="24" :lg="12">
        <industry-clients :industry-data="industryData" v-on:click-item="clickItem"></industry-clients>
      </el-col>
    </el-row>
    <div class="analysis-table table" v-if="ishowTable">
      <el-row>
        <el-col :span="12">
          <el-table
            :data="tableData1"
            @row-click="clickItemRow"
            style="width: 100%">
            <el-table-column
              type="index"
              width="60"
              label="排名">
              <template slot-scope="scope">
                <span>{{scope.row.order}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="industryName"
              label="模块名称">
            </el-table-column>

            <el-table-column
              prop="price"
              label="最新价">
              <template slot-scope="scope">
                {{toThousands(scope.row.price)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="priceChange"
              label="涨跌额">
              <template slot-scope="scope">
                <span>{{scope.row.priceChange}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="percent"
              label="涨跌幅">
              <template slot-scope="scope">
                <span>
                  {{scope.row.percent}}%
                  <i :class="{'icon-increase-up-mini':scope.row.percent>0,'icon-increase-down-mini':scope.row.priceChange<0}"></i>
                  </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="stockName"
              label="标杆企业">
              <template slot-scope="scope">
                <span>{{scope.row.stockName}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="12">
          <el-table
            :data="tableData2"
            @row-click="clickItemRow"
            style="width: 100%">
            <el-table-column
              type="index"
              width="60"
              label="排名">
              <template slot-scope="scope">
                <span>{{scope.row.order}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="industryName"
              label="模块名称">
            </el-table-column>

            <el-table-column
              prop="price"
              label="最新价">
              <template slot-scope="scope">
                {{toThousands(scope.row.price)}}
              </template>
            </el-table-column>

            <el-table-column
              prop="priceChange"
              label="涨跌额">
              <template slot-scope="scope">
                <span>{{scope.row.priceChange}}</span>
              </template>
            </el-table-column>

            <el-table-column
              prop="percent"
              label="涨跌幅">
              <template slot-scope="scope">
                <span>
                  {{scope.row.percent}}%
                  <i :class="{'icon-increase-up-mini':scope.row.percent>0,'icon-increase-down-mini':scope.row.priceChange<0}"></i>
                  </span>
              </template>
            </el-table-column>

            <el-table-column
              prop="stockName"
              label="标杆企业">
              <template slot-scope="scope">
                <span>{{scope.row.stockName}}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <div class="content-bar">
        <el-button  class="bt" size="mini" :disabled="tbCurrentPage == 0" @click="prevPage()"><i class="el-icon-d-arrow-left"></i>
        </el-button>
        <el-button  class="bt" size="mini" :disabled="tbCurrentPage == totalPage" @click="nextPage()"><i
          class="el-icon-d-arrow-right"></i></el-button>
      </div>
    </div>
    <el-row>
      <el-col :md="24" :lg="24">
        <industry-events :event-chart1="info.eventChart1" :event-chart2="info.eventChart2"
                         :info="info"></industry-events>
      </el-col>
    </el-row>
    </div>
    <div v-show="!isHasData" class="empty-page">暂无数据</div>
  </div>
</template>

<script type="text/babel">
import {industry,industryinfo} from '@/api/custComBaseinfo'

import IndustryLoans from './components/IndustryLoans'
import IndustryClients from './components/IndustryClients'
import IndustryEvents from './components/IndustryEvents'
// import AnalysisMode from '../../models/analysis'

export default {
  name: 'dashboard',
  components: {
    IndustryLoans,
    IndustryClients,
    IndustryEvents,
  },

  data () {
    return {
      industryData: [],
      info: {
        eventChart1: {
          dates: [],
          data: [],
          volumes: []
        },
        eventChart2: [],
        curIndustryName: '',
        curCompanyName: '',
        curRate: '',
        isPositive: '',
        eventDates: []
      },
      ishowTable: true,
      showEvents: false,
      tbCurrentPage: 0,
      totalPage: '',
      tbData: [],
      tableData1: [],
      tableData2: [],
      curIndustryName: '',
      curStockCode: '',
	  isHasData: true,
	  loading:true
    }
  },
  mounted () {
	// this.$nextTick(() => {
    //   this.getIndustryList()
    //  })
    this.getIndustryList()
  },
  methods: {
    toThousands (num) {
      return (num || 0).toString().replace(/\d+/, function (n) {
        let len = n.length
        if (len % 3 === 0) {
          return n.replace(/(\d{3})/g, ',$1').slice(1)
        } else {
          return n.slice(0, len % 3) + n.slice(len % 3).replace(/(\d{3})/g, ',$1')
        }
      })
    },
    getIndustryList () {

     this.loading = true;

		
      try {
         		 industry().then(res => {
					// this.total = res.totalElements
					// this.data = res.content
					this.industryData = res


                    if (this.industryData.length > 0) {
					this.isHasData = true
					this.ishowTable = false
					this.tbData = this.industryData
					this.totalPage = this.tbData.length % 6 === 0 ? Math.floor(this.tbData.length / 6) - 1 : Math.floor(this.tbData.length / 6)
					this.getCurData()
					} else {
					this.isHasData = false
					}





					console.log('this.industryData------',this.industryData)
					setTimeout(() => {
						this.loading = false;
					//	this.reqLoading = false
					}, 500)
				}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
				})






	//	this.industryData = await AnalysisMode.getIndustryList()
		// console.log('this.industryData=====',this.industryData)
        // if (this.industryData.length > 0) {
        //   this.isHasData = true
        //   this.ishowTable = false
        //   this.tbData = this.industryData
        //   this.totalPage = this.tbData.length % 6 === 0 ? Math.floor(this.tbData.length / 6) - 1 : Math.floor(this.tbData.length / 6)
        //   this.getCurData()
        // } else {
        //   this.isHasData = false
        // }
      } catch (error) {
       // this.$refs.err_dlg.show(error)
      }
    },
    showTable () {
      this.ishowTable = !this.ishowTable
    },
    indexMethod (index) {
      return index
    },
    nextPage () {
      if (this.tbCurrentPage >= 0 && this.tbCurrentPage <= this.totalPage) {
        this.tbCurrentPage++
      } else {
        this.tbCurrentPage = this.totalPage
      }
    },
    prevPage () {
		console.log('this.tbCurrentPage',this.tbCurrentPage)
      if (this.tbCurrentPage >= 1 && this.tbCurrentPage <= this.totalPage) {
        this.tbCurrentPage--
      } else {
        this.tbCurrentPage = 0
      }
    },
    getCurData () {
      this.tableData1 = []
      this.tableData2 = []
      this.tbData.forEach((item, index) => {
        if (index >= (this.tbCurrentPage) * 6 && index < (this.tbCurrentPage * 6 + 3)) {
          item.order = index + 1
          this.tableData1.push(item)
        } else if (index >= (this.tbCurrentPage * 6 + 3) && index < (this.tbCurrentPage + 1) * 6) {
          item.order = index + 1
          this.tableData2.push(item)
        }
      })
    },
    clickItem (name, code) {
      this.curIndustryName = name
      this.curStockCode = code
      this.info.curIndustryName = name
    },
    clickItemRow (row) {
      this.curIndustryName = row.industryName
      this.curStockCode = row.stockCode
      this.info.curIndustryName = row.industryName
    },
    // 获取各行业的分析数据
    async getAnalysisData (opts) {
      this.info.eventChart1 = {
        dates: [],
        data: [],
        volumes: []
      }
      this.info.eventDates = []
      this.info.eventChart2 = []
      const _opts = {
        industryName: this.curIndustryName,
        stockCode: this.curStockCode
      }
	  if (typeof opts === 'object') Object.assign(_opts, opts)
      try {
		//   const  resData = null
		   industryinfo(_opts).then(res => {
					// this.total = res.totalElements
					// this.data = res.content
				  const resData = res
				  console.log('resData---',resData)


                      // 行业涨跌幅度
        if (resData.industryList.length !== 0) {
          resData.industryList.forEach((item, index) => {
            this.info.eventChart2.push(item.price)
            this.info.eventDates.push(item.date)
          })
        }
        this.info.curRate = Math.abs(resData.industryList[resData.industryList.length - 1].percent)
        if (resData.industryList[resData.industryList.length - 1].percent >= 0) {
          this.info.isPositive = true
        } else {
          this.info.isPositive = false
        }
        // 标杆上市企业
        if (resData.stockList.length !== 0) {
          resData.stockList.forEach((item, index) => {
            this.info.eventChart1.dates.push(item.date)
            this.info.eventChart1.data.push([item.open, item.close, item.low, item.high, item.volume, item.percent])
            this.info.eventChart1.volumes.push(item.volume)
            this.info.curCompanyName = item.name
          })
        }



					setTimeout(() => {
						this.reqLoading = false
					}, 170)
				}).catch(err => {
					this.reqLoading = false
					console.log(err.response.data.message)
				})
  




		//let resData = await AnalysisMode.getIndustryInfo(_opts)
		console.log('resData',resData)
        // 行业涨跌幅度
        if (resData.industryList.length !== 0) {
          resData.industryList.forEach((item, index) => {
            this.info.eventChart2.push(item.price)
            this.info.eventDates.push(item.date)
          })
        }
        this.info.curRate = Math.abs(resData.industryList[resData.industryList.length - 1].percent)
        if (resData.industryList[resData.industryList.length - 1].percent >= 0) {
          this.info.isPositive = true
        } else {
          this.info.isPositive = false
        }
        // 标杆上市企业
        if (resData.stockList.length !== 0) {
          resData.stockList.forEach((item, index) => {
            this.info.eventChart1.dates.push(item.date)
            this.info.eventChart1.data.push([item.open, item.close, item.low, item.high, item.volume, item.percent])
            this.info.eventChart1.volumes.push(item.volume)
            this.info.curCompanyName = item.name
          })
        }
      } catch (error) {
       // this.$refs.err_dlg.show(error)
      }
    },
    // 错误提示信息
    changeErrStatus (data) {
      this.isErr = data
    }
  },
  watch: {
    tbCurrentPage (newVal, oldVal) {
      this.getCurData()
    },
    curIndustryName (newVal, oldVal) {
      this.getAnalysisData()
    }
  }
}
</script>

<style scoped>
.dashboard{
     padding:20px;
     position:relative
}

/* .dashboard { */
    /* .overdue-title-r {
      background: url('../../assets/img/circle-red@2x.png') center left no-repeat;
    }
    .overdue-title-b {
      background: url('../../assets/img/circle-blue@2x.png') top left no-repeat;
    } */

    .overdue-title-r, .overdue-title-b {
      font-size: 16px;
      color: #222222;
      padding-left: 25px;
      background-position: 0 2px;
      background-size: 18px 20px;
    }

    .overdue-num-r, .overdue-num-b {
      font-weight: bold;
      font-size: 49px;

      /* &.mid-size {
        font-size: 36px;
      } */
    }
 


    .overdue-num-r {
      color: #ce2731;
    }

    .overdue-num-b {
      color: #2e80de;
    }

    .overdue-clients, .overdue-loans, .risk-items, .risk-events {
      background-color: #ffffff;
      /*border-radius: 5px;*/
      margin-bottom: 20px;
    }

    .overdue-clients, .overdue-loans {
      height: 300px;
      padding: 40px 20px 50px;
    }
    .overdue-clients:after {
      content: '';
      height: 70%;
      width: 1px;
      position: absolute;
      top: 15%;
      right: 0;
      background: #ebebeb;
    }
    .btn-show-table {
      position: absolute;
      top: 12px;
      right: 24px;
      z-index: 999;
      text-align: right;
    }
    .btn-show-table button {
      font-size: 14px;
      background: #fff;
      border: none;
      color: #1890ff;
      padding: 3px;
      outline: none;
      vertical-align: middle
    }
    .analysis-table {
      padding:50px 20px 15px;
      background: #fff;
      margin-bottom :20px
    }
    .analysis-table td{
      cursor:pointer
    }
    .analysis-table .el-table tr th, .analysis-table .el-table__header-wrapper {
      background:#fafafa;
      color: #252525
    }
    .analysis-table .el-table {
      border-right:1px solid #ce2731;
    }
    .content-bar {
      margin:15px 0 0;
      text-align:right
    }
    .content-bar .el-button:last-child {
      transform:rotateY(180deg)
    }
    .content-bar .el-button {
      border:none;
      padding:0
    }
    .el-table__empty-block{
      min-height:49px
    }
	.bt{
		background-color: #eee !important;
		padding:5px !important
	}
  /* } */
   

</style>



